<!doctype html>
<html lang="en">
<head>
    <title>wijgrid - custom filter operators</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="wijgrid allows custom filter operators" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    
    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css"/>
    <link href="../../themes/wijmo/jquery.wijmo-open.2.3.2.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijinput.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijgrid.css" rel="stylesheet" type="text/css" />

    <script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
    <script src="../../external/globalize.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>

    <script src="../../external/jquery.wijmo-open.all.2.3.2.min.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.plugin.wijtextselection.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijinputcore.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijinputdate.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijinputmask.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijinputnumber.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijdatasource.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijgrid.js" type="text/javascript"></script>


    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            var fop_beginsEndsWith = {
                name: "BeginsEndsWith",
                arity: 2,
                applicableTo: ["string"],
                operator: function(dataVal, filterVal) {
                    if (dataVal) {
                        dataVal = dataVal.toLowerCase();
                        filterVal = filterVal.toLowerCase();

                        if (dataVal.indexOf(filterVal) === 0) {
                           var idx = dataVal.lastIndexOf(filterVal);
                           return idx > 0 && dataVal.length - idx === filterVal.length;
                        }
                    }

                    return false;
                }
            };

            var fop_Even = {
                name: "Even",
                arity: 1,
                applicableTo: ["number", "currency"],
                operator: function(dataVal) {
                    return dataVal % 2 === 0;
                }
            }

            $("#demo").wijgrid({
                showFilter: true,
                allowSorting: true,
                customFilterOperators: [ fop_beginsEndsWith, fop_Even ],
                columns: [ {}, { dataType: "number" } ]
            });
        });
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                wijgrid - custom filter operators</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <table id="demo">
                <thead>
                    <tr>
                        <th>StringColumn</th><th>NumberColumn</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>a</td><td>0</td>
                    </tr>
                    <tr>
                        <td>aba</td><td>1</td>
                    </tr>
                    <tr>
                        <td>aabbcc</td><td>2</td>
                    </tr>
                    <tr>
                        <td>foobarfoo</td><td>3</td>
                    </tr>
                    <tr>
                        <td>foobar</td><td>4</td>
                    </tr>
                    <tr>
                        <td>aaabbbaa</td><td>5</td>
                    </tr>
                </tbody>
            </table>
            <!-- End demo markup -->
            <div class="demo-options">
            <!-- Begin options markup -->
            <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            <p>
               wijgrid allows custom filter operators. This sample shows two custom filters available in the filter drop down.
               <ul>
                   <li>BeginsEndsWith: applicable to string columns, filters values starting and ending with some string.</li>
                   <li>Even: applicable to numeric columns, filters even values.</li>
               </ul>
            </p>
        </div>
    </div>
</body>
</html>
